<template>
  <view class="tab-card" :style="cardStyle">
    <view class="tab-card-top">
      <view class="card-left">
        <image class="head-img" :src="cardData.headImg" ></image>
        <view class="card-text">
          <view class="user-name">
            <view class="user-text">{{cardData.name}}</view>
            <span class="iconfont"
                  :class="cardData.sex===0?'icon-nansheng':'icon-nvsheng-copy'"
            ></span>
          </view>
          <view class="publish-time">{{cardData.time}}</view>
        </view>
      </view>
      <view class="card-right iconfont icon-arrow-left"></view>
    </view>
    <view class="tab-card-content">
      <view class="tab-card-content-text">
        {{cardData.content}}
      </view>
        <view v-if="cardData.imgList.length<2">
          <image
              :mode="'aspectFit'"
              :src="cardData.imgList[0]" class="tab-card-content-img"></image>
        </view>
      <view v-if="cardData.imgList.length>=2" class="tab-card-content-imgList">
          <image
              :mode="'aspectFit'"
              v-for="(item,index) in cardData.imgList" :key="index"
              :src="item"
              class="tab-card-content-imgList-item"
          ></image>
      </view>
    </view>
    <view class="tab-card-bottom">
      <view class="like" @click="doLike" >
        <view
            class="iconfont icon-zanpress"
            :style="pointLike?'color:red':''"
        >1</view>
      </view>
      <view class="messgae">
        <view class="iconfont icon-message">2</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "tabCard",
  props:{
    imgList:{
      type:Array,
      default(){
        return ["1","2","3","3","3"]
      }
    },
    cardStyle:{
      type:String,
      default:""
    },
    cardData:{
      type:Object,
      default(){
        return {
          name:"清羽",
          headImg:"",
          sex:1, //0男 1女
          time:"今天10:11",
          content:"dasdasdaa阿打算打算打啊说点阿萨德爱上大爱上打算大萨达啊打算打打ad阿萨德啊实打实大打算爱上点餐阿萨德爱上爱上打算打算打算打打算爱上打算打算的",
          imgList:["1","2","3","3","3"],
          pointLike:true
        }
      }
    }
  },
  data(){
    return {
      pointLike:false
    }
  },
  mounted() {
    this.pointLike = this.cardData.pointLike;
  },
  watch:{
    cardData:{
      handler(){
        console.log("ada")
      },
      deep:true
    },
  },
  methods:{
    //点赞事件
    doLike(){
      this.pointLike = this.cardData.pointLike = true;
      console.log(this.cardData.pointLike)
    }
  }
}
</script>

<style lang="scss" scoped>

  .tab-card{
    min-height: 300rpx;
    border-radius: 25rpx;
    background-color: #ffffff;
    &>view{
      padding: 30rpx;
    }
    //头部名称
    .tab-card-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      @include button;
      .card-left{
        display: flex;
        .head-img{
          width: 90rpx;
          height: 90rpx;
          border-radius: 8rpx;
          background-color: #1ec6df;
          margin-right: 15rpx;
        }
        .card-text{
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .user-name{
          display: flex;
          align-items: center;
          .user-text{
            font-size: 30rpx;
            margin-right: 10rpx;
            font-weight: bolder;
          }
        }
        .publish-time{
          font-size: 26rpx;
          color: #9C9C9C;
        }
      }

    }
    //内容
    .tab-card-content{
      @include button;
      padding-top: 0;
      .tab-card-content-text{
        margin-bottom: 10rpx;
      }
      .tab-card-content-imgList{
        width: 100%;
        display:flex;
        flex-wrap: wrap;
        &>image{
          width: calc(calc(100% / 3) - 10rpx);
          margin:5rpx;
          height:220rpx;
          border-radius: 20rpx;
          box-sizing: border-box;
          background-color: #1ec6df;
        }
      }
      .tab-card-content-img{
        background-color: #1ec6df;
        height: 300rpx;
      }
    }
    //底部点赞和信息
    .tab-card-bottom{
      display: flex;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
      border-top: 2rpx solid #F1F1F1;
      &>view{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        &>view{
          display: flex;
          align-items: center;
          font-size: 24rpx !important;
        }

      }
    }
  }
</style>